<template>
  <div class="tabs">
    <div class="tabs-bar">
      <!-- 标签页标题，这里要用 v-for -->
      <div :class='tabCls(item)' v-for="(item,index) in navList" :key='index' @click="handleChange(index)">
        {{item.label}}
        <span class='close-icon' v-show="item.name===value" @click.self='closeTab(index)'>X</span>
      </div>
    </div>
    <div class="tabs-content">
      <!-- 这里的slot就是嵌套的pane -->
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    value :{type: [String,Number]},
    closable:{type: Boolean}
  },
  data(){
    return{
      //用于渲染 tabs 的标题
      navList: [],
      //因为不能修改 value，所以复制一份自己维护
      currentValue: this.value,
    }
  },
  created(){
    console.log('closable',this.closable)
  },
  methods:{
    closeTab(index,event){
      this.navList.splice(index, 1);
      event.stopPropagation();
    },
    tabCls(item){
      return[
        'tabs-tab',
        {
          //给当前选中的tab 加一个 class
          'tabs-tab-active': item.name === this.currentValue
        }
      ]
    },
    handleChange(index){
      console.log('index',index);
      var nav = this.navList[index];
      var {name} = nav;
      //改变当前选中的tab，并触发下面的 watch
      this.currentValue = name;
      //更新 value
      this.$emit('input', name);
      //触发一个自定义事件，供父级使用
      this.$emit('on-click', name);
    },
    getTabs(){
      //通过遍历子组件，得到所有的 pane 组件
      return this.$children.filter((item)=>{
        return item.$options.name === 'pane';
      })
    },
    updateNav(){
      this.navList = [];
      this.getTabs().forEach((pane, index)=>{
        this.navList.push({
          label: pane.label,
          name: pane.name || index
        })
        //如果没有给 pane 设置 name，默认设置它的索引
        if(!pane.name) pane.name = index;
        //设置当前选中的tab 的索引，
        if(index === 0){
          if(!this.currentValue){
            this.currentValue = pane.name || index;
          }
        }
      })
      this.updateStatus();
    },
    updateStatus(){
      var tabs = this.getTabs();
      tabs.forEach((tab)=>{
        return tab.show = tab.name === this.currentValue;
      })
    }
  },
  watch:{
    value(val){
      this.currentValue = val;
    },
    currentValue(){
      //在当前选中的 tab 发生变化时，更新pane的显示状态
      this.updateStatus();
    }
  }
}
</script>
<style scoped>
.close-icon{
  width:20px;
  height:20px;
  color: #999;
  cursor: pointer;
}

.tabs{
  font-size:14px;
  color:#657180;
}
.tabs-bar:after{
  content: '';
  display: block;
  width:100%;
  height:1px;
  background:#d7dde4;
  margin-top:-1px;
}
/* .tabs-bar:after{
  display: inline-block;
  padding:4px 16px;
  margin-right:6px;
  background:#fff;
  border: 1px solid #d7dde4;
  cursor: pointer;
  position: relative;
} */
.tabs-tab{
  display: inline-block;
  padding:5px 10px;
  border:1px solid #d7dde4;
  margin:0 10px;
}
.tabs-tab-active{
  color:#3399ff;
  border-top:2px solid #3399ff;
  border-bottom:1px solid #fff;
}
.tabs-tab-active:before{
  content:'';
  display: inline;
  height:1px;
  background:#3399ff;
  position: absolute;
  top:0;
  left:0;
  right:0;
}
.tabs-content{
  padding: 8px 0;
}
</style>


